<template>
  <div class="manage">
      <el-dialog
        :title="operateType === 'add'? '新增用户':'更新用户'"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              ></common-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
      <div style="margin-bottom:20px">
          <el-button  @click="shopTab(val)" v-for="val,i in shopinfo" :key="val.shopId">店铺{{i+1}}</el-button>
        </div>
      <div class="manage-header">
         <div>
           <el-button type="primary" @click="getList" style="margin-right:20px;">全部预约</el-button>
          <el-select v-model="states" filterable placeholder="请选择" @change="getOtherList">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
       </div>
         <common-form
              :formLabel="formLabel"
              :form="searchForm"
              :inline="true"
              ref="form"
              >
              <el-button type="primary" @click="getList">搜索</el-button>
        </common-form>
      </div>
       <div class="table">
          <table>
              <thead>
                  <tr>
                      <th style="width:250px;">预约时间</th>
                      <th style="width:150px;">预约方式</th>
                      <th style="max-width:300px;">备注</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                <template v-if="tableData.length !== 0">
                  <tr v-for="val in tableData" :key="val.appointId">
                      <td>{{val.appointTime}}</td>
                      <td>{{val.appointWay}}</td>
                      <td>{{val.appointRemarks}}</td>
                      <td>
                          <el-button type="primary">处理</el-button>
                          <el-button type="danger" @click="delappoint(val.appointId)">删除</el-button>
                          </td>
                  </tr> 
                </template>
              </tbody>
          </table>
          <template v-if="tableData.length === 0">
                  <p class="nodata">暂无数据</p>
          </template>
           <el-pagination
           v-if="tableData.length !== 0"
          @current-change="changePage"
          :current-page="1"
          background
          layout="prev, pager, next"
          :total="total"
            >
          </el-pagination>
      </div>
    </div>
</template>

<script>
import {deleteAppointRecord,myAppointsForStates,getorderdata} from '../../../api/personalData/shop/shoporder'
import {getshopByid} from '../../../api/personalData/shop/index'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import CommonForm from '../ly/Common/CommonForm.vue'
export default {
    name:'ShopOrder',
    components:{CommonForm},
    data() {
      return {
        operateType:'add',
        isShow:false,
        operateFormlabel:[
        ],
        operateForm:{
        },
        formLabel:[
          {
            model:'keyword',
            label:'',
            type:'input'
          }
        ],
        searchForm:{
          keyword:''
        },
        tableData:[
        ],
        options: [{
          value: 0,
          label: '预约成功'
        }, {
          value: 1,
          label: '预约完成'
        }, {
          value: 2,
          label: '待取消'
        }, {
          value: 3,
          label: '已取消'
        }, {
          value: 4,
          label: '待点评'
        }, {
          value: 5,
          label: '预约过期'
        }],
        states: '',
        shopinfo:[],
        shops:''

      }
    },
    methods:{
      confirm(){
        if(this.operateType === 'add'){
          this.tableData.push(this.operateForm)
          this.isShow = false
        }
      },
      // 切换店铺
      shopTab(val){
          console.log(val);
          this.shops = val
      },
      // 删除记录
      delappoint(appointId){
        console.log(1);
         this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
              deleteAppointRecord({appointId:appointId}).then(data=>{
              const list =data.data.message
                console.log(data.data.message);
                if(list === '成功'){
                  this.$message({
                      type: "success",
                      message: "删除成功!"
                    })
                this.getList()
                }else{
                  this.$message({
                      type: "warning",
                      message: "该订单未完成,不能删除!"
                    })
                }
              })
          })
      },
      getOtherList(){
        console.log(this.states);
        myAppointsForStates({
                        page:1,
                        shopId:this.shops.shopId,
                        size:5,
                        states:this.states          
                }).then(data=>{
                  const list = data.data.data
                this.tableData =list.date
                this.$message({
                  type: "success",
                  message: "搜索成功!"
                })
                console.log(data.data.data);
                })
      },
      getList(){
        getorderdata({
                        page:1,
                        shopId:this.shops.shopId,
                        size:5              
                }).then(data=>{
                   const list = data.data.data
                this.tableData =list.date
                console.log(data.data.data);
                })
      },
      getShopinfo(){
          const user = jwtDecode(cookie.getToken());
           getshopByid({userId:user.userId}).then(data=>{
            const list =data.data.data
             this.shopinfo = list
             console.log('@@',list);
        })
      }
    },
    created(){
      this.getList();
      this.getShopinfo()
    }
}
</script>

<style lang="less" scoped>
.nodata{
  width: 100%;
  text-align: center;
  height: 200px;
  line-height: 200px;
}
.manage-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table{
    width: 90%;
    padding: 30px;
    border: 1px solid rgb(212, 212, 212);
    border-radius:5px ;
    table{
        border-collapse:collapse;
        width: 100%;
        thead{
            tr{
                height: 60px;
                th{
                    border-bottom: 1px solid rgb(212, 212, 212);
                    padding-left: 10px;
                    text-align: left;
                }
            }
        }
        tbody{
            tr{
                 height: 65px;
                td{
                    word-wrap:break-word;
                    border-bottom: 1px solid rgb(212, 212, 212);
                    padding-left: 10px;
                }
            }
        }
    }
}
</style>